<template>
  <div id="authnewindex">
    <div class="moudle1">
      <div class="title">
        数据来源配置
        <!-- <div class="add pointer" @click="dialogVisible=true, dialogTitle='新增数据来源', isDisable=false">新增</div> -->
      </div>
      <div class="content" :style="{'height': tabHeight}">
        <el-table :data="dataList" style="width: 100%" ref="tab" height="100%">
          <el-table-column
            prop="typeName"
            label="名称">
          </el-table-column>
          <el-table-column
            prop="site"
            label="网址"
            align="center">
          </el-table-column>
          <el-table-column
            prop="account"
            label="账号"
            align="center">
          </el-table-column>
          <el-table-column
            prop="password"
            label="密码"
            align="center">
          </el-table-column>
          <el-table-column
            label="状态"
            align="center">
            <template slot-scope="scope">
              <span :class="scope.row.zt==0?'text-green':'text-red'">{{scope.row.enabled==true?'已启用':'已停用'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="240">
            <template slot-scope="scope">
              <template v-for="(item,index) in scope.row.cz">
                <el-button :key="index" v-if="item!='删除'" :disabled="item=='删除'?true:false" :type="item=='删除'?'danger':'primary'" @click="tabCz(item, scope.row)">{{item}}</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="moudle2">
      <div class="title">
        系统数据更新时间配置（24小时）
      </div>
      <div class="content" :style="{'height': tabHeight}">
        <el-table :data="dataList" style="width: 100%" height="100%">
          <el-table-column
            prop="typeName"
            label="系统">
          </el-table-column>
          <el-table-column
            v-for="(item,index) in frequency"
            :key="index"
            :label="item"
            align="center">
            <template slot-scope="scope">
              {{scope.row.timeList[index]?scope.row.timeList[index]:'-'}}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 编辑 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="60%"
      append-to-body>
      <div class="dialogContent">
        <div class="top">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
            <el-row>
              <el-col :span="12">
                <el-form-item label="系统名称：" prop="typeName">
                  <el-input v-model="ruleForm.typeName" :disabled="isDisable"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="网址：" prop="site">
                  <el-input v-model="ruleForm.site" :disabled="isDisable"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="padding-bottom: 20px;">
              <el-col :span="12">
                <el-form-item label="账号：" prop="zh">
                  <el-input v-model="ruleForm.account"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="密码：" prop="password">
                  <el-input v-model="ruleForm.password"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="border-top: 1px solid rgba(0, 0, 0, .1);">
              <el-col :span="12">
                <el-form-item label="更新次数：" prop="gxcs">
                  <el-select v-model="ruleForm.gxcs" placeholder="请选择" @change="gxcsChange" style="width:100%;">
                    <el-option
                      v-for="index of 6"
                      :key="index"
                      :label="index+'次'"
                      :value="index">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="selectTime">
              <template v-for="(item,index) in ruleForm.gxtime.slice(0, 4)">
                <el-col :span="6" :key="index" v-if="index<ruleForm.gxcs">
                  <el-form-item :label="'第'+parseInt(index+1)+'次：'">
                    <el-time-select
                      v-model="ruleForm.gxtime[index].time"
                      :picker-options="{
                        start: '00:00',
                        step: '00:30',
                        end: '22:00'
                      }"
                      placeholder="选择时间">
                    </el-time-select>
                  </el-form-item>
                </el-col>
              </template>
              <template v-for="(item,index) in ruleForm.gxtime.slice(4, 6)">
                <el-col :span="6" :key="index+4" v-if="index+4<ruleForm.gxcs">
                  <el-form-item :label="'第'+parseInt(index+5)+'次：'">
                    <el-time-select
                      v-model="ruleForm.gxtime[index+4].time"
                      :picker-options="{
                        start: '00:00',
                        step: '00:30',
                        end: '22:00'
                      }"
                      placeholder="选择时间">
                    </el-time-select>
                  </el-form-item>
                </el-col>
              </template>
            </el-row>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogTitle: '新增数据来源',
      isDisable: false,
      tabHeight: '',
      frequency: ['第一次', '第二次', '第三次', '第四次', '第五次', '第六次'],
      dataList: [],
      dialogVisible: false,
      ruleForm: {
        id: '',
        name: '',
        url: '',
        zh: '',
        password: '',
        gxcs: '',
        gxtime: [],
        timeList: []
      },
      rules: {
        typeName: [
          { required: true, message: '请输入系统名称', trigger: 'blur' },
        ],
        site: [
          { required: true, message: '请输入活动网址', trigger: 'blur' },
        ],
        account: [
          { required: true, message: '请输入系统登录账号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入系统登录密码', trigger: 'blur' },
        ],
        gxcs: [
          { required: true, message: '请输入系统登录密码', trigger: 'change' },
        ]
      }
    }
  },
  created() {
    const that = this
    this.getData()
  },
  methods: {
    // 获取数据列表
    getData() {
      const  that = this
      that.$axios.post('/sourceconfig/getList').then((res) => {
        that.dataList = []
        if (res) {
          res.forEach(item=>{
            let obj = {
              typeName: item.typeName,
              site: item.site,
              account: item.account,
              password: item.password,
              enabled: item.enabled, // 0-启用，1-停用
              cz: [item.enabled==true?'停用':'启用', '编辑', '删除'],
              timeList: item.timeList,
              id: item.id,
              type: item.type
            }
            that.dataList.push(obj)
            setTimeout(function(){
              let thH = that.$refs.tab.$el.children[1].clientHeight
              let tbodyH = that.$refs.tab.$el.children[2].children[0].clientHeight+1
              that.tabHeight = thH+tbodyH+'px'
              console.log('tabHeight', that.tabHeight)
            },200)
          })
        }
      })
    },
    // tab操作
    tabCz(label, params) {
      console.log('params', params)
      if(label=='删除'){
        let msg = '此操作将删除对“'+params.xt+'”的配置，是否继续?'
        this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }else if(label=='编辑'){
        let gxtime = []
        params.timeList.forEach(item=>{
          let obj = {time: item}
          gxtime.push(obj)
        })
        this.ruleForm = {
          id: params.id,
          typeName: params.typeName,
          site: params.site,
          account: params.account,
          password: params.password,
          enabled: params.enabled,
          timeList: params.timeList.length,
          gxcs: params.timeList.length,
          gxtime: gxtime,
          timeList: [],
          type: params.type
        }
        this.dialogTitle = '编辑数据来源'
        this.dialogVisible = true
        this.isDisable = true
      }else{
        let msg = '确定'+label+'“'+params.typeName+'”吗?'
        this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let postData = {
            id: params.id,
            enabled: !params.enabled
          }
          this.$axios.post('/sourceconfig/enabled', postData).then((res) => {
            console.log('res', res)
            if(res==true){
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getData()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消更改'
          });          
        });
      }
    },
    // 更新次数改变
    gxcsChange(e) {
      this.ruleForm.gxtime = []
      for(let i=0; i<e; i++){
        let obj = {time: ''}
        this.ruleForm.gxtime.push(obj)
      }
    },
    // 修改提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let gxcs = this.ruleForm.gxcs,
              isTime = true
          this.ruleForm.timeList = []
          this.ruleForm.gxtime.forEach((item,index)=>{
            if(item.time=='' || item.time==null && index<gxcs-1){
              isTime = false
            }
            this.ruleForm.timeList.push(item.time)
          })
          if(!isTime){
            this.$alert('请完善系统配置信息，更新时间必选', '提示', {
              confirmButtonText: '确定'
            })
            return
          }
          this.$axios.post('/sourceconfig/edit', this.ruleForm).then((res) => { 
            if(res==true){
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.dialogVisible = false
              this.getData()
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    }
  },
}
</script>

<style lang='scss' scoped>
  #authnewindex {
    padding: 20px;
    margin-left: 20px;
    font-size: 14px;
    background: #f7f7f7;
    width: calc(100% - 20px);
    overflow-x: hidden;
    height: calc(100% - 20px);
    box-sizing: border-box;
    .moudle1, .moudle2{
      background: #fff;
      border-radius: 3px;
      padding-bottom: 10px;
      .title{
        font-size: 18px;
        font-weight: bold;
        color: #666666;
        line-height: 32px;
        padding: 20px 20px 10px 30px;
        position: relative;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
        .add{
          width: 99px;
          height: 36px;
          line-height: 36px;
          background: #3e7ef2;
          border: 1px solid #e1e1e1;
          border-radius: 5px 5px 5px 5px;
          color: #fff;
          text-align: center;
          position: absolute;
          right: 20px;
          bottom: 10px;
        }
      }
      .content{
        padding-left: 20px;
        .el-table{
          border: none;
        }
      }
    }
    .moudle2{
      margin-top: 20px;
    }
    .el-table::before{
      height: 0;
    }
  }
</style>
<style lang="scss">
  #authnewindex{
    .el-table thead tr th {
      background-color: #ffffff !important;
      border-bottom: none !important;
    }
  }
  .el-dialog__header{
    background: #fff;
    text-align: left !important;
  }
  .dialogContent{
    margin-bottom: 40px;
    .selectTime{
      .el-date-editor.el-input{
        width: 140px;
        .el-input__inner{
          padding-right: 0;
        }
      }
    }
    .el-form-item{
      margin-top: 20px;
    }
  }
</style>